<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout">
<head>
    <title>New/Edit Pet</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css"/>
</head>
<body>

<div class="container">

    <!-- sample header -->
    <nav class="navbar navbar-default navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Static Brand</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="employeeList.html">Link1</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </nav>
    <!-- sample header end -->

    <h1 layout:fragment="header">
        <span th:text="${pet['new']} ? 'New Pet' : 'Edit Pet'" th:remove="tag">New/Edit Pet</span>
    </h1>

    <div layout:fragment="content">
        <div class="row">
            <!--/*@thymesVar id="pet" type="cn.wilmar.petclinic.model.Pet"*/-->
            <form th:action="'#'" th:method="${pet['new']} ? 'post' : 'put'" action="../owners/ownerDetails.html"
                  th:object="${pet}" class="form-horizontal col-sm-6">

                <input type="hidden" name="id" th:value="${pet.id}"/>
                <!--            <div class="form-group has-feedback">-->
                <div class="form-group">
                    <label class="col-sm-4 control-label">Owner</label>
                    <div class="col-sm-8" th:text="|${pet.owner.firstName} ${pet.owner.lastName}|">
                        yinguowei
                    </div>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('name')} ? 'error'">
                    <label class="col-sm-4 control-label">Name</label>
                    <div class="col-sm-8">
                        <input class="form-control" th:field="*{name}"/>
                        <span class="help-inline" th:errors="*{name}">[error]</span>
                    </div>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('name')} ? 'error'">
                    <label class="col-sm-4 control-label">Birth Date</label>
                    <div class="col-sm-8">
                        <input class="form-control" th:field="*{birthDate}"/>
                        <span class="help-inline" th:errors="*{birthDate}">[error]</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-4 control-label">Type</label>
                    <div class="col-sm-8">
                        <select th:field="*{type}" class="form-control" th:remove="all-but-first" size="5">
                            <option th:each="type : ${types}" th:value="${type}" th:text="${type}">Type1</option>
                            <option>Type2</option>
                            <option>Type3</option>
                        </select>
                        <span class="help-inline" th:errors="*{type}">[error]</span>
                    </div>
                </div>
                <!--</div>-->
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                        <button class="btn btn-default" type="submit"
                                th:text="${pet['new']} ? 'Add Pet' : 'Update Pet'">
                            Add/Update Pet
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script>
            $(function () {
                $("#birthDate").datepicker({dateFormat: 'yy/mm/dd'});
            });
        </script>
    </div>


    <div class="text-center">
        sample copyright 2016
    </div>
</div>
</body>
</html>

